<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" th:href="@{../layui1/css/layui.css}" media="all">
    <script th:src="@{../layui1/layui.js}"></script>
    <script src="../js/jquery-1.8.3.min.js"></script>
</head>
<body>
<div class="layui-row" align="center">
    <div class="layui-col-xs6">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">主管公安机关</label>
                <div class="layui-input-block">
                    <input type="text" name="" lay-verify="required" lay-reqtext="主管公安机关不能为空"
                           placeholder="选择主管公安机关"
                           autocomplete="off" class="layui-input dept_name">
                    <input type="text" name="deptId" lay-verify="required"
                           autocomplete="off" class="layui-input dept_id" style="display:none;">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">加油站名称</label>
                <div class="layui-input-block">
                    <select id="petrolStationName" name="petrolStationId" lay-filter="petrolStationName">
                        <!--<option value="" disabled="disabled">请选择</option>-->
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">加油站地址</label>
                <div class="layui-input-block">
                    <input type="text" id="site" name="site" lay-verify="required" lay-reqtext="加油站地址不能为空"
                           placeholder="请输入加油站地址" autocomplete="off" class="layui-input" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">法人姓名</label>
                <div class="layui-input-block">
                    <input type="text" id="legalPersonName" name="legalPersonName" lay-verify="required" lay-reqtext="法人姓名岂能为空？"
                           placeholder="请输入法人姓名" autocomplete="off" class="layui-input" disabled>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">法人身份证号</label>
                <div class="layui-input-block">
                    <input type="text" id="legalPersonCard" name="legalPersonCard" lay-verify="required" lay-reqtext="法人身份证号岂能为空？"
                           placeholder="请输入法人身份证号" autocomplete="off" class="layui-input" disabled>
                </div>
            </div>

            <!--用户信息-->
            <div class="layui-form-item">
                <label class="layui-form-label">登录账号</label>
                <div class="layui-input-block">
                    <input type="text" id="loginName" name="loginName" lay-verify="required" lay-reqtext="登陆账号不能为空" placeholder="请输入登陆账号"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户姓名</label>
                <div class="layui-input-block">
                    <input type="text" id="userName" name="userName" lay-verify="required" lay-reqtext="用户姓名岂能为空？" placeholder="请输入用户姓名"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">登陆密码</label>
                <div class="layui-input-block">
                    <input type="password" id="password" name="password" lay-verify="required" lay-reqtext="密码岂能为空？"
                           placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" id="affirmPassword" name="affirmPassword" lay-verify="required" lay-reqtext="确认密码岂能为空？"
                           placeholder="请确认密码" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit lay-filter="addUser">注册</button>
                </div>
            </div>
        </form>
    </div>

    <!--派出所选择树-->
    <div class="layui-form-item" id="choose_dept_menu" style="display: none">
        <label class="layui-form-label">主管公安机关</label>
        <div class="layui-input-inline">
            <div id="deptTree" class="demo-tree-more"></div>
        </div>
    </div>

    <!--注册说明-->
    <div style="margin: 20px">
        <table align="center" style="width:800px" class="table_add" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="2">注册步骤说明</td>
            </tr>
            <tr>
                <td>
                    <ul style="color:red">
                        <li>1、首先注册企业，并且审核通过后才能在本页面注册账号；</li>
                        <li>2、注册时先选择主管公安机关，然后选择加油站企业；如果找不到加油站企业信息，请到注册企业界面注册，如果注册过，请等待公安机关审核。</li>
                        <li>3、在“用户登录账号信息”栏目下，填写对应用户信息；</li>
                        <li>4、注册成功后，即可在登录界面，输入“用户登录账号信息”栏目设置的帐号和口令登陆系统。</li>
                    </ul>
                </td>
            </tr>
        </table>
    </div>
</div>
</body>
<script>
    layui.use(['form','tree','layer'], function () {
        var form = layui.form
            , layer = layui.layer;

        var tree = layui.tree;
        //监听提交
        form.on('submit(addUser)', function (data) {
            //alert(data.field.petrolStationId);
            if ($("#password").val()!=$("#affirmPassword").val()){
                //弹出提示两次密码不一样
                layer.msg('两次输入的密码不一样');
            }else{
                var user = {
                    "loginName":data.field.loginName,
                    "userName":data.field.userName,
                    "password":data.field.password,
                    "petrolStationId":data.field.petrolStationId
                };
                $.ajax({
                    url: '/SignIn/addUser',
                    dataType: 'json',
                    type: 'POST',
                    data: user,
                    success: function (result) {
                        if (result.code==0) {
                            window.location.href = '/login.html';
                        }
                    }
                });
            }
            return false;
        });

        //点击主管公安机关弹出派出所树
        $(".dept_name").click(function () {
            var index = layer.open({
                title: '选择主管派出所',
                type: 1,
                content: $('#choose_dept_menu'),
                area: ['550px', '450px']
            });

            $.ajax({
                url: '/SignIn/findDept',
                dataType: 'json',
                contentType: "application/json;charset=UTF-8",
                type: 'GET',
                success: function (result) {
                    //基本演示
                    tree.render({
                        elem: '#deptTree'
                        , data: result
                        , onlyIconControl:true
                        ,click: function(obj){
                            /*alert(obj.data.id);*/ //得到当前点击的节点数据的id
                            /*alert(obj.data.title);*/ //得到当前点击的节点数据的名字
                            $(".dept_id").val(obj.data.id);
                            $(".dept_name").val(obj.data.title);
                            layer.close(index);
                            var dept_id = $(".dept_id").val();
                            $.ajax({
                                url: '/SignIn/findPetrolStationByDeptId',
                                dataType: 'json',
                                data:{"deptId":dept_id},
                                //contentType: "application/json;charset=UTF-8",
                                type: 'GET',
                                success: function (result) {
                                    console.log(result);
                                    for (var i=0;i<result.length;i++){
                                        $("#petrolStationName").append("<option value="+result[i].petrolStationId+">"+result[i].petrolStationName+"</option>");
                                    }
                                    form.render('select');
                                    //下拉框刷新后立即填入下方信息
                                    $.ajax({
                                        url: '/SignIn/findPetrolStationById',
                                        dataType: 'json',
                                        data:{"petrolStationId":$("#petrolStationName").val()},
                                        //contentType: "application/json;charset=UTF-8",
                                        type: 'GET',
                                        success: function (result) {
                                            //console.log(result);
                                            $("#site").val(result.data.site);
                                            $("#legalPersonName").val(result.data.legalPersonName);
                                            $("#legalPersonCard").val(result.data.legalPersonCard);
                                        }
                                    });
                                }
                            });
                        }
                    });
                }
            });

            //下拉框改变时触发事件
            form.on('select(petrolStationName)',function (data) {
                var value = data.value;
                if (value!=null&&value!=''){
                    $.ajax({
                        url: '/SignIn/findPetrolStationById',
                        dataType: 'json',
                        data:{"petrolStationId":value},
                        //contentType: "application/json;charset=UTF-8",
                        type: 'GET',
                        success: function (result) {
                            //console.log(result);
                            $("#site").val(result.data.site);
                            $("#legalPersonName").val(result.data.legalPersonName);
                            $("#legalPersonCard").val(result.data.legalPersonCard);
                        }
                    });
                }
            })

        });


    });
</script>
</html>